<template>
<!-- 今日推荐 -->
  <div class="container">
    <div class="recommend">
      <div class="recommend_title">{{ title }}</div>
      <router-link :to="{name:'morelist',params:{musictype:type,titles:title}}" tag="div" class="recommend_more">
        更多
      </router-link>
    </div>
    <div class="view">
      <ul>
        <!--动态传参 :to="{name:'musicplay',params:{songid:item.song_id}}" -->
        <router-link tag="li" :to="{name:'musicplay',params:{songid:item.song_id}}" v-for="(item,index) in today_recommend" :key="index">
          <img :src="item.pic_big" alt="">
          <div class="view_title">{{ item.title }}</div>
        </router-link>
      </ul>
    </div>
  </div>
</template>

<script>
  export default {
    name:'TodayRecommend',
    data(){
      return{
        today_recommend:[]
      }
    },
    props:{
      title:{
        type:String,
        default:"今日榜单"
      },
      type:{
        type:String,
        default:"1"
      }
    },
    mounted(){
      let url = this.HOST + "/v1/restserver/ting?method=baidu.ting.billboard.billList&type=" + this.type +"&size=6&offset=0"
      this.$axios.get(url)
        .then(res => {
          this.today_recommend = res.data.song_list
        })
        .catch(error => {
          console.log(error);
        })
    }
  }
</script>

<style scoped>

.container{
  width: 100%;
  height: 382px;
  background-color: white
}

.recommend{
  width: 100%;
  height: 70px;
  display: flex
}

.recommend_title{
  padding: 26px;
  font-size: 20px;
  flex: 1
}

.recommend_more{
  float: right;
  padding: 30px 30px 0 0
}

.view{
  width: 100%;
  height: 282px;
}

.view ul {
  list-style: none;
  height: 282px;
}

.view ul li{
  width: 30.5%;
  height: 132px;
  float: left;
  margin:5px 
}

.view ul li img{
  width: 100%;
  height: 120px;
}

.view_title{
  text-align: center;
  font-size: 10px;
  height: 12px;
  /* 超出一行的文本用省略号显示 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

</style>